<template>
  <div class="container">
    <div class="puzzle-box" @click="animation">
      <!-- 第一排 -->
      <div class="img-item img0-0 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314667936.png"
          class="puzzle puzzle-0-1"
        />
      </div>
      <div class="img-item img0-1 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314667948.png"
          class="puzzle puzzle-0-2"
        />
      </div>
      <div class="img-item img0-2 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314668426.png"
          class="puzzle puzzle-0-3"
        />
      </div>
      <div class="img-item img0-3 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314665138.png"
          class="puzzle puzzle-0-4"
        />
      </div>
      <div class="img-item img0-4 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314669344.png"
          class="puzzle puzzle-0-5"
        />
      </div>
      <div class="img-item img0-5 first">
        <img
          src="https://ssl-pubpic.51yund.com/1314672649.png"
          class="puzzle puzzle-0-6"
        />
      </div>
      <!-- 第二排 -->
      <div class="img-item img0-0 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314673240.png"
          class="puzzle puzzle-1-1"
        />
      </div>
      <div class="img-item img0-1 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314678324.png"
          class="puzzle puzzle-1-2"
        />
      </div>
      <div class="img-item img0-2 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314678342.png"
          class="puzzle puzzle-1-3"
        />
      </div>
      <div class="img-item img0-3 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314680202.png"
          class="puzzle puzzle-1-4"
        />
      </div>
      <div class="img-item img0-4 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314681109.png"
          class="puzzle puzzle-1-5"
        />
      </div>
      <div class="img-item img0-5 second">
        <img
          src="https://ssl-pubpic.51yund.com/1314682745.png"
          class="puzzle puzzle-1-6"
        />
      </div>
      <!-- 第三排 -->
      <div class="img-item img0-0 third"></div>
      <div class="img-item img0-1 third"></div>
      <div class="img-item img0-2 third"></div>
      <div class="img-item img0-3 third"></div>
      <div class="img-item img0-4 third"></div>
      <div class="img-item img0-5 third"></div>
      <!-- 第四排 -->
      <div class="img-item img0-0 fourth"></div>
      <div class="img-item img0-1 fourth"></div>
      <div class="img-item img0-2 fourth"></div>
      <div class="img-item img0-3 fourth"></div>
      <div class="img-item img0-4 fourth"></div>
      <div class="img-item img0-5 fourth"></div>
      <!-- 第五排 -->
      <div class="img-item img0-0 fifth"></div>
      <div class="img-item img0-1 fifth"></div>
      <div class="img-item img0-2 fifth"></div>
      <div class="img-item img0-3 fifth"></div>
      <div class="img-item img0-4 fifth"></div>
      <div class="img-item img0-5 fifth"></div>
      <!-- 第六排 -->
      <div class="img-item img0-0 sixth"></div>
      <div class="img-item img0-1 sixth"></div>
      <div class="img-item img0-2 sixth"></div>
      <div class="img-item img0-3 sixth"></div>
      <div class="img-item img0-4 sixth"></div>
      <div class="img-item img0-5 sixth"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      gray: false,
    }
  },
  created() {},
  mounted() {},
  methods: {
    animation($event) {
      console.log($event)
      let div = $event.srcElement
      console.log(div)
      if (div.classList['3'] == 'show-animation') {
        div.classList.remove('show-animation')
        div.classList.add('close-animation')
      } else {
        div.classList.remove('close-animation')
        div.classList.add('show-animation')
      }
    },
  },
}
</script>

<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  user-select: none;
  background-image: linear-gradient(180deg, #7ccff1 61%, #0a8233 100%);

  .puzzle-box {
    position: relative;
    margin-top: 20vh;
    width: 300px;
    height: 300px;
    background-color: #055247;
    border-radius: 20px;
    .img-item {
      position: absolute;
      width: 50px;
      height: 50px;
      // background-color: pink;
      box-sizing: border-box;
      // border: 2px solid red;
    }
    .puzzle {
      position: absolute;
      top: 0;
      left: 0;
      width: 50px;
      height: 50px;
    }
    .puzzle-0-1 {
    }
    .puzzle-0-2 {
      top: 7px;
      left: -6px;
      transform: scale(1.3, 1.3);
    }
    .puzzle-0-3 {
      top: 0px;
      left: 0px;
      transform: scale(1.5, 1);
    }
    .puzzle-0-4 {
      top: 7px;
      left: 5px;
      transform: scale(1.25, 1.28);
    }
    .puzzle-0-5 {
      top: 0px;
      left: 5px;
      transform: scale(1.35, 1);
    }
    .puzzle-0-6 {
      top: 0px;
      left: 0px;
      transform: scale(1.1, 1);
    }
    .puzzle-1-1 {
      top: -2px;
      left: 7px;
      transform: scale(1.3, 1.4);
    }
    .puzzle-1-2 {
      top: 5px;
      left: 9px;
      transform: scale(1.35, 1.15);
    }
    .puzzle-1-3 {
      top: -1px;
      left: 8px;
      transform: scale(1.3, 1.38);
    }
    .puzzle-1-4 {
      top: -0px;
      left: 4px;
      transform: scale(1.1, 1);
    }
    .puzzle-1-5 {
      top: -7px;
      left: -3px;
      transform: scale(1.1, 1.23);
    }
    .puzzle-1-6 {
      top: -0px;
      left: -8px;
      transform: scale(1.32, 1.5);
    }
    .img0-0 {
      top: 0px;
      left: 0px;
    }
    .img0-1 {
      top: 0px;
      left: 50px;
    }
    .img0-2 {
      top: 0px;
      left: 100px;
    }
    .img0-3 {
      top: 0px;
      left: 150px;
    }
    .img0-4 {
      top: 0px;
      left: 200px;
    }
    .img0-5 {
      top: 0px;
      left: 250px;
    }
    .first {
      top: 0;
    }
    .second {
      top: 50px;
    }
    .third {
      top: 100px;
    }
    .fourth {
      top: 150px;
    }
    .fifth {
      top: 200px;
    }
    .sixth {
      top: 250px;
    }
    .show-animation {
      animation: show 1.5s forwards;
    }
    .close-animation {
      animation: close 1.5s forwards;
    }
  }
}
@keyframes show {
  0% {
    transform: scale(1);
    z-index: 10;
  }
  100% {
    // background-color: #fff;
    top: 42%;
    left: 42%;
    transform: scale(5) rotateY(360deg);
    z-index: 10;
  }
}
@keyframes close {
  0% {
    // background-color: #fff;
    top: 42%;
    left: 42%;
    transform: scale(5) rotateY(360deg);
    z-index: 10;
  }
  99.9% {
    z-index: 10;
  }
  100% {
    z-index: 1;
  }
}
</style>
